<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <title>SpringBoot + WebSocket + SockJS</title>
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/sockjs.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/stomp.min.js}"></script>
</head>
<body>
<div>
    <div>
        <label>
            <input id="text-client" name="clientId" placeholder="输入对方账号"/>
            <input id="text-content" name="content" placeholder="输入发送内容"/>
            <input id="send-btn" type="button" value="发送消息">
        </label>
    </div>
</div>
<script th:inline="javascript">
    const clientId = [[${clientId}]];
    console.log("clientId = " + clientId);
    const socket = new SockJS('http://127.0.0.1:8080/sockjs/websocket');
    const stompClient = Stomp.over(socket);
    // 禁用调试日志
    stompClient.debug = null;
    stompClient.connect({}, () => {
        stompClient.subscribe('/group/message', function (resp) {
            console.log("group message = " + resp.body)
        });
        stompClient.subscribe('/user/' + clientId + '/message', function (resp) {
            console.log("user message = " + resp.body)
        });
    });
    $('#send-btn').on('click', () => {
        stompClient.send('/message/send', {}, JSON.stringify({
            'clientId': $('#text-client').val(),
            'content': $('#text-content').val()
        }));
    });
</script>
</body>
</html>